import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { TopicWrapper, TopicItem } from "../style";

class Topic extends PureComponent {
  render() {
    return (
      <TopicWrapper>
        {
          this.props.list.map((item) => {
            return (
              <TopicItem key={item.id}>
              <img
                className="topic-pic"
                src={item.get('imgUrl')}
                alt="pic"
              />
              {item.get('title')}
            </TopicItem>
            )
          })
        }
      </TopicWrapper>
    );
  }
}

const mapStateToProps = state => ({
  list : state.get('home').get('topicList')
});

export default connect(mapStateToProps, null)(Topic);
